<template>
  <view class="container">
    <!-- 头部 -->
    <!-- <view class="fixed-con">
      <statusBar></statusBar>
      <view class="go-back">
        <image src="../../static/go-back.svg" @click="goBack"/>
        <view>交易物流</view>
        <image class="img-hide" src="../../static/brands-search.svg"/>
      </view>
    </view> -->

    <navigationBar title="交易物流"/>

    <view class="content">
      <view class="item" >
        <view class="item-time">03-24</view>
        <view class="item-con">
          <view class="item-title">物流中转通知</view>
          <view class="item-image">
            <image src="https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1722242331231"/>
            <view>
              <view>物流显示您的订单已中转至揭阳市，点击查看>></view>
              <view>查看物流</view>
            </view>
          </view>
          <view class="item-go-detail">
            <text>查看详情</text>
            <image src="../../static/right.svg"/>
          </view>
        </view>
      </view>
    </view>

    <!-- 已经到底了 -->
    <view class="is-end" v-if="isEnd">没有更多了</view>

    <view class="safe-padding"></view>

  </view>
  
</template>

<script setup>
    import { ref, watch, reactive, onMounted, nextTick } from 'vue';  
    import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";	
    import functions from '@/utils/functions.js'

    //是否加载结束
    const isEnd = ref(false)

    //分页数据
    const pageData = reactive({
      pageSize:10,
      page:1
    })

    const dataList = reactive({
      noticeList:[]
    })


    onMounted(() => {
      // getNoticePage()
    })

    onReachBottom(() => {
      // if(isEnd.value) return;
      // pageData.page++
      // getNoticePage()
    })

    const goBack = () => {
      uni.navigateBack({ delta: 1 })
    }

    //获取评论和@列表
    const getNoticePage = async () => {
      let res = await noticePage({ ...pageData,userGgroup:1 })
      if (res.list.length < pageData.pageSize) isEnd.value = true
      console.log('通知公告',res)
      dataList.noticeList = dataList.noticeList.concat(res.list)
    }


  </script>

  <style lang="scss" scoped>
    .container{
      width: 100vw;
      height: 100vh;
      background-color: #F4F3F7;
      position: fixed;
      top: 0;
      left: 0;
      /* padding: 0;
      margin: 0; */
      overflow-y: scroll;

      .fixed-con{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        .go-back{
          width: 750rpx;
          height: 90rpx;
          padding:0 30rpx;
          box-sizing: border-box;
          background-color: white;
          border-bottom: 2rpx solid #F1F1F1;
          @include flex(row,space-between,center);
          image{
            width: 40rpx;
            height: 40rpx;
          }
          view{
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
          }
          .img-hide{
            opacity: 0;
          }
        }
      }

      .content{
        margin-top: calc(var(--status-bar-height) + 90rpx);
        
        .item{
          .item-time{
            width: 750rpx;
            text-align: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #A9A7B3;
            margin-bottom: 20rpx;
            padding-top: 40rpx;
          }

          .item-con{
            width: 690rpx;
            /* height: 222rpx; */
            background: #FFFFFF;
            border-radius: 4rpx;
            margin:0 auto 40rpx auto;
            padding: 30rpx 24rpx 0 24rpx;
            box-sizing: border-box;

            .item-title{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
              margin-bottom: 20rpx;
            }

            .item-image{
              width: 100%;
              height: 200rpx;
              @include flex(row,space-between);

              image{
                width: 200rpx;
                height: 200rpx;
              }

              >view{
                width: 426rpx;
                height: 200rpx;
                @include flex(column,space-between,flex-start);
                >view:nth-of-type(1){
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #72707B;
                }
                >view:nth-of-type(2){
                  width: 130rpx;
                  height: 48rpx;
                  border-radius: 26rpx;
                  border: 2rpx solid #16DFF2;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #16DFF2;
                  text-align: center;
                  line-height: 48rpx;
                }

              }
            }

            .item-go-detail{
              width: 100%;
              height: 64rpx;
              margin-top: 24rpx;
              border-top: 2rpx solid #F1F1F1;
              @include flex(row,space-between);

              >text{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #A9A7B3;
              }
              >image{
                width: 24rpx;
                height: 24rpx;
              }
            }


          }
        }
      } 

      .is-end{
        text-align: center;
        margin: 20rpx;
        color: #8a8a8a;
      }

    }
  </style>